﻿@{
    ViewBag.Title = "Employee";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="form-horizontal" >

    <h2>ข้อมูลพนักงาน</h2>
        <legend>จัดการรายการข้อมูลพนักงาน</legend>
        <div class="control-group">
            <label class="control-label" for="txtEmployee">ชื่อพนักงาน</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="txtEmployee"/> &nbsp;<input id="btnSearchEmployee" type="button" class="btn btn-primary" value="ค้นหา"></input>
                <p class="help-block">กรอกส่วนใดส่วนหนึ่งของชื่อพนักงานเพื่อค้นหา</p>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">เพิ่มข้อมูลพนักงาน</label>
            <div class="controls">
                <button type="submit" class="btn btn-primary">เพิ่ม</button>
            </div>
        </div>
        <div class="control-group">
            <table id="grdEmployee"></table>
            <div id="pager"></div>
        </div>
        <div id="dialog-password" title="Change password" style="display:none">
            <div class="control-group">
                <label class="control-label" for="txtNewPassword">New Password</label>
                <div class="controls">
                    <input type="text" class="input-large" id="txtNewPassword"/> 
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="txtConfirmNewPassword">Confirm Password</label>
                <div class="controls">
                    <input type="text" class="input-large" id="txtConfirmNewPassword"/> 
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" id="txtErrorMessage" style="color:Red">test</label>
            </div>
        </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        initialGrid();

        $("#btnSearchEmployee").click(function () {
            doSearch();
        });

    });

    function doSearch() {

        var keyword = $("#txtEmployee").val();

        var params = {
            keyword: keyword
        };

        $('#grdEmployee').jqGrid('clearGridData');
        $('#grdEmployee').setGridParam({ url: '/Employee/GetUsers', postData: params }).trigger('reloadGrid');

    }

    function changePassword() {
        var list = $("#grdEmployee");
        var selectedRow = list.getGridParam("selrow");
        if (selectedRow == null) {
            alert("selected row first");
            return;
        }
        $("#dialog-password").attr("display", "block");
        $("#dialog-password").dialog({
            id:"dlgChangePassword",
            resizable: true,
            modal: true,
            buttons: { " Ok ": function () {
                if ($("#txtNewPassword").attr("value") != $("#txtConfirmNewPassword").attr("value")) {
                    alert("bad");
                    return;
                } else {
                    var userId = list.getRowData(list.getGridParam("selrow")).user_id;
                    var newPass = $("#txtNewPassword").attr("value");
                    callService($(this), userId, newPass);
                }
            }, "Cancel": function () { $(this).dialog("close"); }
            }
        });
    }

    function callService(dialog, userId, newPass) {
        $.ajax({
            type: "POST",
            url: "/Employee/ChangePassword",
            data: "{user_password:\"" + newPass + "\",user_id:"+userId+"}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result, status, xhr) {
                if (result.isPass == false) {
                    $("#txtErrorMessage").text(result.iMessage);
                }
                else {
                    alert("success");
                    dialog.dialog("close");
                }
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                alert(err.Message);
            }
        });
    }


    function initialGrid() {

        var updateDialog = {
            url: '/Employee/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
//                    var ajaxData = {};

//                    var list = $("#grdEmployee");
//                    var selectedRow = list.getGridParam("selrow");
//                    var rowData = list.getRowData(selectedRow);
//                    ajaxData = { user_id: rowData.user_id, userTypeId: rowData.user_type_id };
//                    return ajaxData;
                }
                , width: "550"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มพนักงาน";
        $.jgrid.edit.editCaption = "แก้ไขพนักงาน";
        $.jgrid.del.caption = "ต้องการลบรายการนี้หรือไม่?";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";


        $("#grdEmployee").jqGrid({
            url:'/Employee/GetUsers',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['User Id', 'User Type Id', 'user_firstname', 'user_lastname', 'user_id_no', 'user_tel_no',  'user_status', 'user_login_name', 'user_password','Created Date'],
            colModel: [
                    { name: 'user_id', index: 'user_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'user_type_id', index: 'user_type_id', width: 40, align: 'left', key: false, editable: true, edittype: 'select', editoptions: { dataUrl: "/Employee/GetEmpListHtml", dataInit: function (elem) { $(elem).width(170); } }, editrules: { required: true} , formoptions: { elmsuffix: ' '}},
                    { name: 'user_firstname', index: 'user_firstname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'user_lastname', index: 'user_lastname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'user_id_no', index: 'user_id_no', width: 40, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} },
                    { name: 'user_tel_no', index: 'user_tel_no', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'user_status', index: 'user_status', width: 40, align: 'left', key: false, editable: true, edittype: 'checkbox', editoptions: { value: "Y" }, editrules: { required: true} },
                    { name: 'user_login_name', index: 'user_login_name', width: 40, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} , hidden:true},
                    { name: 'user_password', index: 'user_password', width: 40, align: 'left', key: false, hidden: true },
                    { name: 'user_create_date', index: 'user_create_date', width: 40, align: 'left', key: false, hidden: true}],
            pager: $('#pager'),
            rowNum: 10,
            width: 850,
            rownumbers: true,
            multiselect: true,
            sortname: 'user_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: true,
            caption: 'รายการผู้ใช้งานระบบ',
            autowidth: true
        }).navGrid('#pager',
            {
                edit: true, add: true, del: true, search: false, refresh: true
            }, updateDialog,
            updateDialog,
            updateDialog
        ).navButtonAdd('#pager', {
            caption: "",
            title:"Change Password",
            buttonicon: "ui-icon-locked",
            onClickButton: changePassword,
            position: "last"
        });

        
    }

</script>